class Snake {
  element: HTMLElement;
  head: HTMLElement;
  bodies: HTMLCollection;
  isLive: boolean = true
  constructor() {
    this.element = document.getElementById('snake')!
    this.head = document.querySelector('#snake>div')!;
    this.bodies = this.element.getElementsByTagName('div')
  }
  get X() {
    return this.head.offsetLeft
  }
  get Y() {
    return this.head.offsetTop
  }

  set X(value) {
    if (this.X === value) return
    if (value < 0 || value > 290) {
      throw Error('蛇撞墙了')
      this.isLive = false
    }
    // 修改X时 是在修改水平坐标 向左走的时候不能向右走，反之亦然
    if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
      // console.log('水平方向掉头了');
      // 如果说value大于this.X 则说明蛇正在向左方向走，但是要往右掉头，则让蛇继续向左走
      if (value > this.X) {
        value = this.X - 10
      } else { // 正好相反
        value = this.X + 10
      }
    }
    // 移动身体
    this.moveBody()
    this.head.style.left = value + 'px'
    // 是否撞到自己
    this.checkHeadBody()
  }
  set Y(value) {
    if (this.Y === value) return
    if (value < 0 || value > 290) {
      throw Error('蛇撞墙了')
      this.isLive = false
    }
    // 修改Y时 是在修改垂直坐标 向上走的时候不能向下走，反之亦然
    if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
      // console.log('垂直方向掉头了');
      // 如果说value大于this.Y 则说明蛇正在向上方向走，但是要往下掉头，则让蛇继续向上走
      if (value > this.Y) {
        value = this.Y - 10
      } else { // 正好相反
        value = this.Y + 10
      }
    }
    // 移动身体
    this.moveBody()
    this.head.style.top = value + 'px'
    // 是否撞到自己
    this.checkHeadBody()
  }
  // 添加身体方法
  addBody() {
    this.element.insertAdjacentHTML('beforeend', '<div></div>')
  }
  // 身体移动
  moveBody() {
    /**
     * 将后边的身体设置为前边身体的位置
     * 
     */
    for (let i = this.bodies.length - 1; i > 0; i--) {
      const X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
      const Y = (this.bodies[i - 1] as HTMLElement).offsetTop;
      (this.bodies[i] as HTMLElement).style.left = X + 'px';
      (this.bodies[i] as HTMLElement).style.top = Y + 'px';
    }
  }
  // 是否身体和头相撞
  checkHeadBody(){
    for (let i = 1; i < this.bodies.length; i++) {
      const bd = this.bodies[i] as HTMLElement
      if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {
        // 说明蛇头撞到了身体
        throw Error('撞到了自己')
      }
      
    }
  }
}

export default Snake